<template>
  <div class="main box_center cf" >
    <el-row style="background-color: white">
      <el-col :span="12"  class="item" v-for="book in books">
        <el-row>
          <el-col :span="8">
            <img :src="book.picUrl" style="width: 90%;cursor: pointer" @click="toBookInfo(book.id)">
          </el-col>
          <el-col :span="16">
            <p class="book_name" v-html="book.bookName" @click="toBookInfo(book.id)"></p>
            <div class="book_sim_info" >
              <p class="book_label">
                <span v-html="'作者：'+book.authorName"></span>
                <span v-html="'分类：'+book.catName"></span>
                <span v-html="'字数：'+book.wordCount"></span>
              </p>
              <p class="desc" v-html="book.bookDesc"></p>
              <p >
                <span v-html="formatTime(book.lastIndexUpdateTime)"></span>
              </p>
            </div>

          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {timeFormat} from "@/utils";
import router from "@/router";

export default {
  name: "searchBook",
  props:{
    books:[]
  },
  methods:{
    toBookInfo(bookId){
      router.push({path:`/book/${bookId}`})
    },
    formatTime(time){
      var format = timeFormat(time);
      return format
    }
  }
}
</script>

<style scoped>
.book_label span{
  margin-right: 1em;
}
.book_sim_info p{
  padding-top: 0.5em;
  font-size: 1.2em;
  /*font-weight: lighter;*/
  color: #7f7f7f;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.item{
  padding: 2em;
}
.desc,.book_name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc{
  -webkit-line-clamp:4;
}
.book_name{
  font-size: 1.7em;
  -webkit-line-clamp:1;
  font-weight: bold
}
.book_name:hover{
  color: #e06f2a;
  cursor: pointer;
}


</style>
